<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<base href="http://localhost:8080/ssm/">
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="static/bootstrap/js/jquery.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>测试ssm</h1>
	<a href="showheros/1" class="btn btn-success">看英雄</a>
	<a href="testredis" class="btn btn-success">redis测试</a>
	
	<!-- bootstrap美化页面 -->
	<div class="container">
		<div class="row"> 
			<div class="col-md-12"> <h1>显示英雄</h1> </div>
		</div>
		<div class="row"> 
			<div class="col-md-4 col-md-offset-10">
				<button class="btn btn-success">查询</button>
				<button class="btn btn-default">新增</button>
			</div>
		</div>
		<div class="row">  
			<div class="col-md-12">
				<table class="table table-striped" id="tb1">
				<thead>
				<tr>
					<th>id</th>
					<th>stname</th>
					<th>sex</th>
					<th>phone</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				<%-- <c:forEach var="user"  items="${pageInfo.list}" >
     				<tr><td>${user.stid }</td><td>${user.stname }</td><td>${user.sex }</td><td>${user.phone }</td> <td><button class="btn btn-danger">
     					<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
     				</button> 
     				<button class="btn btn-info">
     					<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
     				</button></td> </tr>
				</c:forEach> --%>
				</tbody>
				</table>
			</div>
		</div>
		<div class="row">  
			<!-- 分页的文字信息 -->
			<div class="col-md-4" id="pageTotal">
				总共${pageInfo.total}行记录
			</div>
			<div class="col-md-8">
				<ul class="pagination">
					<%-- <li><a href="showheros/1">&laquo;</a></li>
					<c:forEach items="${pageInfo.navigatepageNums }" var="k">
						<c:if test="${k==pageInfo.pageNum }">
							<li><a class="btn btn-danger" href="showheros/${k}">${k}</a></li>
						</c:if>
						<c:if test="${k!=pageInfo.pageNum }">
							<li><a class="btn btn-default" href="showheros/${k}">${k}</a></li>
						</c:if>
					</c:forEach>
					<li><a href="showheros/${pageInfo.pages}">&raquo;</a></li> --%>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
$(function(){
	goPage(1);
	
	function goPage(pn){
		$.ajax({
			url:"heros/"+pn,
			type:"get",
			success:function(result){
				console.log(result);
				//显示首页
				showTable(result);
				//分页信息
				showPage(result);
			}
		});
	}

	function showTable(result){
		$("tbody").empty();
		var heros=result.data.list;
		$.each(heros,function(index,obj){
			console.log(obj.stname);
			var stid=$("<td></td>").append(obj.stid);
			var stname=$("<td></td>").append(obj.stname);
			var sex=$("<td></td>").append(obj.sex);
			var phone=$("<td></td>").append(obj.phone);
			var delbtn=$("<button></button>").addClass("btn btn-danger")
				.append("<span></span>").addClass("glyphicon glyphicon-remove");
			var upbtn=$("<button></button>").addClass("btn btn-info")
				.append("<span></span>").addClass("glyphicon glyphicon-tags");
			var btnTd=$("<td></td>").append(delbtn).append(upbtn);
			$("<tr></tr>").append(stid)
				.append(stname)
				.append(sex)
				.append(phone)
				.append(btnTd)
				.appendTo("#tb1 tbody");
		});
	}

	function showPage(result){
		var total=result.data.total;
		var pages=result.data.pages;
		var nums=result.data.navigatepageNums;
		var curpage=result.data.pageNum;

		$("#pageTotal").html("共"+total+"行记录");
		var fbtn=$("<li></li>").append($("<a></a>").append("<span aria-hidden='true'>&laquo;</span>"));
		var lbtn=$("<li></li>").append($("<a></a>").append("<span aria-hidden='true'>&raquo;</span>"));

		$(".pagination").empty();
		$(".pagination").append(fbtn);
		$.each(nums,function(index,item){
			var li=$("<li><a href='#'>"+item+"</a></li>");
			if(item==curpage){
				li.addClass("active");
			}
			$(".pagination").append(li);
			li.click(function(){
				goPage(item);
			});
		});

		$(".pagination").append(lbtn);
		fbtn.click(function(){
			goPage(1);
		})
		lbtn.click(function(){
			goPage(pages);
		})

		
		/* $("#pageTotal").html("共 "+ result.data.total + "行记录");
		var fbtn=$("<li></li>").append($("<a></a>").append("<span aria-hidden='true'>&laquo;</span>").attr("href","heros/1"));
		var lbtn=$("<li></li>").append($("<a></a>").append("<span aria-hidden='true'>&raquo;</span>").attr("href","heros/"+result.data.pages));
		console.log("最后一页"+result.data.pages);
		
		$(".pagination").append(fbtn);

		var nums=result.data.navigatepageNums;
		for(var i=0;i<nums.length;i++){
			if(nums[i]==result.data.pageNum){
				console.log(nums[i]+"---"+result.data.pageNum);
				var td=$("<li></li>").append($("<a>"+nums[i]+"</a>").addClass("btn btn-danger").attr("href","heros/"+nums[i]));
			}else{
				console.log(nums[i]+"==="+result.data.pageNum);
				var td=$("<li></li>").append($("<a>"+nums[i]+"</a>").addClass("btn btn-default").attr("href","heros/"+nums[i]));
			}
			$(".pagination").append(td);
		}
		$(".pagination").append(lbtn); */
	}
});
</script>
</html>